<template>
  <div class="serch">
      <el-input v-model.trim="state" :placeholder="$t('SerchInput_Pleaseinputthecontent')" @input="filterdata" @focus="xianshi" @blur="xiaoshi"></el-input>
    <ul class="list" v-show="isShow">
      <li v-for="item in newdata" :key="item.Id" @mousedown.passive="itemclick(item)">
        {{item.RepoTags ? item.RepoTags[0] : item.RepoDigests[0]}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      state: '', // 输入框内容
      newdata: null, // 筛选后的数据
      isShow: false // 是否要显示列表
    }
  },
  props: ['serchdata', 'show', 'image'],
  mounted () {
    if (this.image) {
      // console.log(this.image)
      let item = this.serchdata.filter(item => {
        return (item.Id === this.image)
      })
      this.state = item[0].RepoTags[0]
    }
  },
  methods: {
    // 获取焦点显示
    xianshi () {
      // 根据父组件传过来的show判断是否要显示列表
      if (this.show === 'false') {
        return
      }
      this.isShow = true
      this.filterdata()
    },
    // 失去焦点隐藏
    xiaoshi () {
      this.isShow = false
      this.$emit('serchstate', this.state)
    },
    // 筛选数组，以及input事件
    filterdata () {
      if (this.show) {
        this.newdata = this.state ? this.serchdata.filter((item) => {
          return item.Names[0].toLowerCase().indexOf(this.state.toLowerCase()) !== -1
        }) : this.serchdata
        this.$emit('serchActive', this.newdata)
      } else {
        this.newdata = this.state ? this.serchdata.filter((item) => {
          if (item.RepoTags === null) {
            return item.RepoDigests[0].toLowerCase().indexOf(this.state.toLowerCase()) !== -1
          } else {
            return item.RepoTags[0].toLowerCase().indexOf(this.state.toLowerCase()) !== -1
          }
          // return item
        }) : this.serchdata
      }
    },
    // 鼠标按下选择
    itemclick (item) {
      this.state = item.RepoTags[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.serch{
  position: relative;
}
.list{
  position: absolute;
  z-index: 10;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  padding: 10px;
  li{
    height: 30px;
    min-width: 300px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
